<template>
  <div class="">
    <el-button type="primary" @click="downloadDocx">下载DOCX</el-button>
    <el-button type="primary" @click="downloadDocxOffice">下载DOCX - 错误</el-button>
  </div>
</template>

<script>
import { docxConfig } from "@/utils/docx";
import { upload } from "@/api/docx";
import { Packer } from "docx";
import { downloadFile } from "@/utils/index";
import { MicrosoftConfig } from '@/utils/MicrosoftDocx'
export default {
  name: "docx",

  props: {},

  components: {},

  data () {
    return {
      docxList: {
        head: { title: "页眉" },
        bottom: { title: "页脚" },
        mainTitle: { title: "主标题" },
        subtitle: { title: "副标题" },
        tableCell: {
          timePeriod: [["/", "早上", "下午", "晚上", "凌晨"]],
          dateTimeWork: [
            {
              value: [
                "周一",
                "起床\n上班\n打瞌睡",
                "摸鱼\n下班",
                "健身\n看直播",
                "睡觉",
              ]
            },
            {
              value: [
                "周二",
                "起床\n上班\n打瞌睡",
                "摸鱼\n下班",
                "健身\n看直播",
                "睡觉",
              ]
            },
            {
              value: [
                "周三",
                "起床\n上班\n打瞌睡",
                "摸鱼\n下班",
                "健身\n看直播",
                "睡觉",
              ]
            },
            {
              value: [
                "周四",
                "起床\n上班\n打瞌睡",
                "摸鱼\n下班",
                "健身\n看直播",
                "睡觉",
              ]
            },
            {
              value: [
                "周五",
                "起床\n上班\n打瞌睡",
                "摸鱼\n下班",
                "健身\n看直播",
                "睡觉",
              ]
            },
          ],
          dateTimeWeekend: [
            { value: ["周六", "摆烂"] },
            { value: ["周日", "摆烂"] },
          ],
          mergeDateTimeWeekend: [
            { value: ["周六", "摆烂"] },
            { value: ["周日", "摆烂"] },
          ],
          dateImg: require("../assets/icon.jpg"),
        },
      },
    };
  },

  computed: {},

  watch: {},
  created () { },

  mounted () { },

  methods: {
    // 导出docx - 已解决 Microsoft Word 打开会报错版本
    downloadDocx () {
      // 创建实例
      const docx = new docxConfig();
      // 调用生成docx方法，并将希望生成值传递进去
      const doc = docx.create(this.docxList);
      // 导出为 Blob - 将文件同步给后端接口
      // Packer.toBlob(doc).then(async (blob) => {
      //   const formData = new FormData();
      //   formData.append("file", blob);
      //   const data = await upload(formData);
      //   downloadFile(blob, "模板");
      // });

      // -------------------------------------

      // 直接导出，不留痕
      Packer.toBlob(doc).then((blob) => {
        downloadFile(blob, "模板");
      });
    },
    // Microsoft - 导出docx - 在 Microsoft Word 中打开会报文件损坏版本
    downloadDocxOffice () {
      // 创建实例
      const docx = new MicrosoftConfig();
      // 调用生成docx方法，并将希望生成值传递进去
      const doc = docx.create(this.docxList);
      // 导出为 Blob - 将文件同步给后端接口
      // Packer.toBlob(doc).then(async (blob) => {
      //   const formData = new FormData();
      //   formData.append("file", blob);
      //   const data = await upload(formData);
      //   downloadFile(blob, "模板");
      // });

      // -------------------------------------

      // 直接导出，不留痕
      Packer.toBlob(doc).then((blob) => {
        downloadFile(blob, "模板");
      });
    },
  },
};
</script> 

<style scoped lang="less">
</style>